/*
  食谱图
  Autho:devstone
  Email:kevinlq0912@163.com
  QQ:2313828706
*/
import QtQuick 2.0
import "../util/MathUtil.js" as MathUtil

Item {
    id: netSpeed;
    width: parent.width
    height: parent.height

    //最外边圆半径
    property var m_radius: Math.min(parent.width,parent.height)*0.4
    property var m_radius2: m_radius*0.78
    property var m_jsonData: ""
    property bool m_bisValid: false
    //每个数据占的角度
    property var m_perDataAngle: (360 - m_lineAngle * m_jsonData.length)/100
    //数据单位
    property var m_unitName: "%"
    property var m_lineAngle: 2.2
    //头像边框颜色
    property var m_headPicColor: "#FFBC3A"
    property var m_strPicPath: setting.m_instrumentPanelPath+"/4.png";

    Component.onCompleted:
    {
        m_jsonData =[
                    {"name":"蛋白质","fillColor":"#E217A1","data":"22"},
                    {"name":"水分","fillColor":"#1777e2","data":"13"},
                    {"name":"骨骼","fillColor":"#17cde2","data":"14"},
                    {"name":"脂肪","fillColor":"#3fc371","data":"15"},
                    {"name":"肌肉","fillColor":"#ffbc3a","data":"10"},
                    {"name":"内脏","fillColor":"#e27217","data":"16"},
                    {"name":"淀粉","fillColor":"#b017e2","data":"10"}
                ];

        m_perDataAngle = (360 - m_lineAngle * m_jsonData.length)/100;

        if ( dataCheck() > 100 )
        {
            console.log("data invalid!");
            return;
        }
        m_bisValid = true;
    }

    function update()
    {
        canvas.requestPaint();
        console.log("update")
    }

    function dataCheck()
    {
        var sumData = 0;
        for (var i = 0; i < m_jsonData.length; i++)
        {
            sumData += parseInt(m_jsonData[i].data);
        }

        return sumData;
    }

    Canvas
    {
        id: canvas;
        width: parent.width
        height: parent.height
        smooth: true

        property var m_context: null

        onPaint:
        {
            var ctx = getContext("2d");
            m_context = ctx;
            var width = canvas.width
            var height = canvas.height
            ctx.clearRect(0,0,width,height);

            ctx.fillStyle = "#273341";
            ctx.fillRect(0,0,width,height);
            ctx.fill();


            ctx.save();
            //将原点移到中心点,方便绘制
            ctx.translate(width/2,height/2);

            drawPanel(ctx);

            ctx.restore();
        }

        Component.onCompleted: loadImage(m_strPicPath);

        onImageLoaded:
        {
            requestPaint();
        }

        function drawPanel(ctx)
        {
            //计算数据合法性--所有的数据项综合应该不大于100，不满足直接返回不进行绘制
            if ( !m_bisValid)
            {
                console.log("data invalid!")
                return;
            }

            drawCircle(ctx,0,360,m_radius,"#323d4b");

            //画最外边的扇形
            drawSector1(ctx);

            //内覆盖扇形背景圆1
            drawCircle(ctx,0,360,m_radius*0.82,'#273341');

            //彩色内扇叶
            drawSector2(ctx);

            //内覆盖扇形背景圆2
            drawCircle(ctx,0,360,m_radius*0.6,'#273341');

            //绘制中间头像区域
            drawHeadPicImage(ctx,0,0,m_radius*0.38);
        }

        function drawSector1(ctx)
        {
            ctx.beginPath();
            var stAngle = 0;
            var lineStAngle = 0;

            //计算数据所占百分比
            var length = m_jsonData.length;

            for ( var i = 0; i < length; i++)
            {
                var fillColor = m_jsonData[i].fillColor;
                var data = m_jsonData[i].data;
                var perDataAngle = data * m_perDataAngle;
                //外
                drawCircle(ctx,stAngle,stAngle+perDataAngle,m_radius,fillColor);
                //data
                drawSectorCircleText(ctx,data+m_unitName,true,m_radius*0.90,stAngle,stAngle+perDataAngle,"left");
                stAngle +=perDataAngle + m_lineAngle;
            }
        }

        function drawSector2(ctx)
        {
            //计算数据合法性--所以的数据项综合应该不大于100

            ctx.beginPath();
            var stAngle = 0;
            var percentage = 360/100;

            //计算数据所占百分比
            var length = m_jsonData.length;
            for ( var i = 0; i < length; i++)
            {
                var data = m_jsonData[i].data;
                var name = m_jsonData[i].name;
                var fillColor = m_jsonData[i].fillColor;
                var perDataAngle = data * m_perDataAngle;
                //内
                drawCircle(ctx,stAngle,stAngle+perDataAngle,m_radius2,fillColor);
                //名称
                drawSectorCircleText(ctx,name,false,m_radius*0.70,stAngle,stAngle+perDataAngle,"center");
                stAngle +=perDataAngle + m_lineAngle;
            }
        }

        //绘制数据和名称
        function drawDataAndName(ctx)
        {
            var stAngle = 0;
            ctx.beginPath();
            for (var i = 0; i < m_jsonData.length; i++)
            {
                var data = m_jsonData[i].data;
                var name = m_jsonData[i].name;
                var fillColor = m_jsonData[i].fillColor;
                var perDataAngle = data * m_perDataAngle;

                //名称
                drawSectorCircleText(ctx,name,m_radius*0.70,stAngle,stAngle+perDataAngle,"center");
                stAngle +=perDataAngle;
            }
            ctx.closePath();
        }

        /*
           画圆
           startAngle: 开始角度:
           endAngle:   结束角度
           radius:     半径
           color:      颜色
        */
        function drawCircle(ctx,startAngle,endAngle,radius,color)
        {
            ctx.beginPath();
            ctx.moveTo(0,0);
            ctx.fillStyle = color;
            ctx.arc(0,0,radius,MathUtil.getRadian(startAngle),
                    MathUtil.getRadian(endAngle),false);;
            ctx.fill();
            ctx.closePath();
        }

        //绘制文字
        function drawCircleText(ctx,string,size,radius,startAngle,endAngle)
        {
            /*
                绘制圆上的文字，需要知道对应文字的角度以及坐标
            */
            //计算角度
            //var angle = (Math.abs(endAngle - startAngle))/2;
            var angle = (endAngle - startAngle)/2 +startAngle;
            //计算对应的坐标
            var point = MathUtil.getCircleCoordinate(radius,0,0,angle);
            ctx.beginPath();
            ctx.fillStyle = "#FFFFFF";
            ctx.font = size +"px Arial";
            ctx.textBaseline = "middle";// 文字垂直对齐方式
            ctx.textAlign = "center";   // 文字水平对齐方式
            ctx.fillText(string,point[0],point[1]);
            ctx.closePath();
        }

        /*
            function:绘制扇形圆形文字
            文字可以随着扇形进行环绕
            ctx:
            strText: 需要绘制的字符
            bNum: 该字符是否是数字(因为汉字和数字间距不同)
            startAngle/endAngle:起始角度
            TextAlign: 方向
        */
        function drawSectorCircleText(ctx,strText,bNum,radius,startAngle,endAngle,TextAlign)
        {
            var index = 0;
            //计算每一个字符占的角度值
//            var angleDecrement = (endAngle - startAngle)/(strText.length);
            //下面是设置字符间距，汉字和数字间距不同
            var angleDecrement = bNum == true?5:10;
            var angleHalf = (endAngle - startAngle)/2;
            var angle = startAngle +(angleHalf - (strText.length - 1)/2*angleDecrement);
            ctx.save();
            ctx.fillStyle= "#FFFFFF";
            ctx.font = m_radius*0.09+"px Arial";
            ctx.textAlign = TextAlign;
            ctx.textBaseline = "middle";
            while (index < strText.length)
            {
                var character = strText.charAt(index);
                ctx.save();
                ctx.beginPath();
                ctx.translate(Math.cos(MathUtil.getRadian(angle))*radius,
                              Math.sin(MathUtil.getRadian(angle))*radius);
                ctx.rotate(MathUtil.getRadian(90 + angle));
                ctx.fillText(character,0,0);
                ctx.closePath();
                angle += angleDecrement;
                index++;
                ctx.restore();
            }
            ctx.restore();
        }

        //绘制头像
        function drawHeadPicImage(ctx,x,y,radius)
        {
            ctx.beginPath();
            ctx.save();
            var d = radius*2;
            var dx = x - radius - 2;
            var dy = y - radius - 2;
            ctx.arc(x,y,radius,0,Math.PI*2,true);
            ctx.strokeStyle = m_headPicColor;
            ctx.lineWidth = 8;
            ctx.closePath();
            ctx.stroke();
            ctx.clip();
            if ( m_strPicPath != null)
            {
                ctx.drawImage(m_strPicPath,dx,dy,d,d);
            }
            ctx.restore();
        }
    }
}
